<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="include :: header('登录')"/>
<th:block th:include="include :: datetimepicker-css"/>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/ocean/css/common.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/head.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/index.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/pagination.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/datepicker3.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/tanchuang.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/style.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/prt.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/bice.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/yulan.css" rel="stylesheet" type="text/css">
    <link href="/ocean/css/jquery.range.css" rel="stylesheet" type="text/css">
    <link href="/ajax/libs/layui/css/modules/laydate/default/laydate.css" rel="stylesheet" type="text/css">
    <th:block th:include="include :: ele-vue"/>
</head>
<style type="text/css">
    /*.time-input{
        width: 126px!important;
    }*/
</style>
<body>
<div class=" prt_cont1_box">
    <div class=" prt_cont1">
        <div class="border_t left"></div>
        <p class="p_title left">产品订阅</p>
        <div class="border_t right"></div>
        <div class="clearfix"></div>

        <div class="bc_contit1">
            <input type="hidden" id="productId" th:value="${product.id}"/>
            <input type="hidden" id="fileType" th:value="${product.fileType}"/>
            <input type="hidden" id="dyType" value="0"/>
            <div class="bc_contit2">
                <span class="bc_xz left">预报要素</span>
                <select class="left bc_xl">
                    <span th:each="items:${elementList}">
                        <option value="${items.englishAbbreviations}">[[${items.elementName}]]</option>
                    </span>
                </select>
                <div class="clearfix"></div>
            </div>
            <div class="bc_contit2">
                <span class="bc_xz left">订阅类型</span>
                <input type="hidden" id="workType" value="0"/>
                <a href="JavaScript:void(0)" onclick="cover('all')">
                    <div class="bc_xz2 left" id="all">全覆盖</div>
                </a>
                <a href="JavaScript:void(0)" onclick="cover('some')">
                    <div class="bc_xz1 left" id="some">部分覆盖</div>
                </a>
            </div>
            <!--部分覆盖开始--><!--此处为部分覆盖和全覆盖作为选项卡显示，选择全覆盖显示全覆盖信息，部分覆盖隐藏；反之.-->
            <div id="vue" class="prt_fg">
                <div class="bc_contit2 left select-time">
                    <div><span class="bc_xz left">时间段</span></div>
                   <!-- <div><span>请选择开始时间:</span><input  type="date" id="beginDate" style="width: 20%" name="trip-start"></div>
                    <div><span>请选择结束时间:</span><input  type="date" id="endDate" style="width: 20%" name="trip-start"></div>-->
                    <el-date-picker
                            @change="ce"
                            v-model="value2"
                            type="datetimerange"
                            align="right"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                    <div class="clearfix"></div>
                </div>
                <div class="bc_contit2 left" id="someDiv" style="display:none;">
                    <button onclick="fanwei()" style="    height: 30px;width: 80px;background-color: #1844a8;color: #ffffff;border: 0px;">预览范围</button>
                    <span class="metadata"></span>
                    <div class="xz_cont_1 xz_cont1_height" id="longDiv">
                      <label class="label_sty left">经度</label>
                        <!-- <input class="range-slider" type="hidden" id="longSlider" style="display: none"/>
                       <span class="span_font">取值范围：</span>-->
                        <input type="text" th:value="114" id="longMinVal"/>-
                        <input type="text" th:value="126" id="longMaxVal"/>
                    </br></br>
                        <span class="span_font" id="longRange">取值范围：-180~180</span>
                        <!--  <div class="clearfix" style="display: none"></div>-->
                    </div>
                    <div class="xz_cont_1 xz_cont1_height" id="latiDiv">
                        <label class="label_sty left">纬度</label>
                      <!--  <input class="range-slider" type="hidden" id="latiSlider" style="display: none"/>
                        <span class="span_font">取值范围：</span>-->
                        <input type="text" value="26" id="latMinVal"/>-
                        <input type="text" value="37" id="latMaxVal"/>
                       </br></br>
                        <span class="span_font" id="latiRange">取值范围：-90~90</span>
                        <!-- <div class="clearfix" style="display: none"></div>-->
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
                <div class="dingyue_div">
                    <div class="dingyue" onclick="createWork()">订阅</div>
                    <div class="dingyue_2" onclick="returnback()">返回</div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>
   var vue = new Vue({
        // 控制的标签容器
        el: '#vue',
        // 交互的数据
        data() {
            return {
                value2: '1111'
            }
        },
        mounted() {
        },
        methods: {
            ce(){
                console.log(this.value2)
            }
        }
    })
</script>
<th:block th:include="include::footer"/>
<th:block th:include="include::datetimepicker-js"/>
<script th:src="@{/ocean/js/subscription.js}"></script>
<script type="text/javascript" src="/ocean/js/dd_belatedpng_0.0.8a-min.js"></script>
<script type="text/javascript" src="/ocean/js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="/ocean/js/laydate.js"></script>
<script type="text/javascript" src="/ocean/js/jquery.range.js"></script>
<!--<script type="text/javascript" src="/ajax/libs/layui/modules/laydate.js"></script>-->

<script>
    $("#longMinVal").val("-180");
    $("#longMaxVal").val("180");
    $("#latMinVal").val("-90");
    $("#latMaxVal").val("90");
function returnback() {
    $("#test").load("/home/productBrowsing/browseHP")
}
function fanwei(){

    var minLon=$("#longMinVal").val();
    var maxLon=$("#longMaxVal").val();
    var minLat=$("#latMinVal").val();
    var maxLat=$("#latMaxVal").val();
    /*console.log(minLon)
    console.log(maxLon)
    console.log(minLat)
    console.log(maxLat)*/
    var prefix ="/leaflet/map";
    var data = minLon+"&"+maxLon+"&"+minLat+"&"+maxLat;
    $.modal.openOptions({
        title: '预览',
        url: prefix +"/yldt/"+data,
        width: "800",
        height: "500",
        showButtonPanel: false,
        btn: ['关闭'],
        yes: function(index, layero){
            $.modal.close(index);//使用layer.close(index);无效
        },
        cancel: function(index, layero){
            $.modal.close(index);
        }
    });

}
</script>
</html>
